<template>
	<view>
		<view>
			<scroll-view scroll-x="true" scroll-y="true" class="scroll-xy" >
				<iframe :src="configurationSrc" scrolling="no" frameborder="0"
			              height="100%" width="100%" >
				</iframe>
			</scroll-view>
		</view>
		<view class="CCC"></view>
		<view>
			<!-- <span class="saqwe1">最小值:</span> -->
			<input  type="text" v-model="taoyaa.numerica1" placeholder="请输入最小值" class="saqwe2"  />
			<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
			<input  type="text" v-model="taoyaa.numerica2" placeholder="请输入最大值" class="saqwe4"  />
		</view>
		<view class="content">
			<view class="content-B headline-B">
				<view class="headline-A"></view>
				<view class="title">工艺组态</view>
			</view>
		</view>
		<view class="BBB">
			<view class="qiun-charts">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchstart1" @touchmove="touchmove1" @touchend="touchend1"/>
			</view>
		</view>
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	import Loading1 from "@/compoents/loading11.vue";
	//import uCharts from '@/js_sdk/u-charts/u-charts.js';
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	import { timeTrans } from '@/js_sdk/u-charts/time.js'
	var _self;
	var canvaLineA=null;
	var canvaLineB=null;
	var lastMoveTime2=null
	var lastMoveTime=null;//最后执行移动的时间戳
	var uChartsInstance1 = {};
	export default {
		components:{
			Loading1,
		},
		data() {
			return {
				taoyaa:{
					numerica1:'',
					numerica2:'',
				},
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				itemCount:4,
				tempAxis:[],
				tempAxis2:[],
				yAxis1:[],
				yAxis2:[],
				yAxis3:[],
				loadingA:'',
				loadingB:'',
				wellId:'',
				allTags:[],
				allTagsMap:[],
				startDate:'',
				endDate:'',
				timer:'',
				wellName:'',
				moshi:'',
			}
		},
		onReady() {

		},
		onShareAppMessage(){
		},

		onLoad(option) {
			_self = this;
			//console.log(option);
			this.moshi=option.dictName+'模式';
			this.wellName = option.well_name
			this.wellId=option.well_id;
			this.getServerData(option.well_id);
			this.cWidth=uni.upx2px(700);
			this.cHeight=uni.upx2px(400);
			//this.timer1();
		},
		watch: {
			//套压降幅范围值b
			taoyaa: {
			    handler (newName, oldName) {
					_self = this;
			        let eee1 = JSON.parse(JSON.stringify(_self.yAxis1))
					let eee2 = JSON.parse(JSON.stringify(_self.yAxis2))
					let eee3 = JSON.parse(JSON.stringify(_self.yAxis3))
			        if(_self.taoyaa.numerica1!=''){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyaa.numerica1){
			        			eee1[a]=null;
			        		}
			        	}
						for(let a = 0;a<eee2.length;a++){
							if(eee2[a] < _self.taoyaa.numerica1){
								eee2[a]=null;
							}
						}
						for(let a = 0;a<eee3.length;a++){
							if(eee3[a] < _self.taoyaa.numerica1){
								eee3[a]=null;
							}
						}
			        };
					if(_self.taoyaa.numerica2!=''){
						//测试
						for(let a = 0;a<eee2.length;a++){
							if(eee2[a] > _self.taoyaa.numerica2){
								eee2[a]=null;
							}
						}
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyaa.numerica2){
								eee1[a]=null;
							}
						}
						for(let a = 0;a<eee3.length;a++){
							if(eee3[a] > _self.taoyaa.numerica2){
								eee3[a]=null;
							}
						}
					};
			        let LineA={
			        	categories: _self.tempAxis,
			        	series:[{
			        	"name": "井口油压",
			        	"data": eee1,
			        	},{
			        	"name": "井口套压",
			        	"data": eee2,
			        	},{
			        	"name": "阀后压力",
			        	"data": eee3,
			        	},]
			        };
			        _self.drawCharts1("canvasLineA",LineA);
			        },
					deep: true,
			},
		},
		computed: {
			configurationSrc(){
			    let name = '';
				if(this.moshi == '柱塞模式'){
					name = '柱塞模式';
				}else if(this.moshi == '间歇模式'){
					name = '间歇模式';
				}else if(this.moshi == '时间模式'){
					name = '时间模式';
				}else{
					name = '无制度';
				};
				       //'http://10.89.67.239:9001'
				//var aa=this.$requestUrl.requestUrl('/jmbb2')+"/runview.aspx?filename=" + name +'&WellId=' + this.wellId + '&WellName=' + this.wellName;
			    var aa='http://10.89.67.239:9001'+"/runview.aspx?filename=" + name +'&WellId=' + this.wellId + '&WellName=' + this.wellName;
				/* console.log("ouououououoouo");
				console.log(aa); */
				return aa;
			}
		},
		methods: {
			//定时器每5秒刷新一下
			timer1(){
				//console.log(this.wellId);
				this.timer = setInterval(() => {
				    this.getServerData(this.wellId)
				}, 30000);

			},
			//title
			/* getTitie(name){
				uni.setNavigationBarTitle({
					title:name

				})
			}, */

			//井口油压，井口套压，阀后压力
			getServerData(wellId){
				//获取tag
				//let url2='http://127.0.0.1:9011/zsgl/wellCurve/allTags/'+this.wellId;
				let url2=this.$requestUrl.requestUrl('/zs')+'/app/app/allTags/'+this.wellId;
				uni.request({
					url:url2,
					data:{},
					success: (ruf) => {
						/* console.log("第一层");
						console.log(ruf.data);
						console.log("第一层"); */
						let allTags = [];
						let allTagsMap = new Map();
						// 收集所有油压、套压、阀后压力 tag
						// 1:瞬量 2:阀后压力 3:油压 4:套压 5:温度 6:节流后温度 9:进气压力 10: 排气压力
						// 排除7:孔板阀计量昨日类 因为这个需要按天数来 单独使用
						for (let i = 0; i < ruf.data.length ; i++) {
						  if(ruf.data[i].px == 2 || ruf.data[i].px == 3 || ruf.data[i].px == 4){
						    //console.log(ruf.data[i].tag);
							allTags.push(ruf.data[i].tag);
						    allTagsMap.set(ruf.data[i].tag, ruf.data[i].px);
						  }
						}
						this.allTags = allTags;
						this.allTagsMap = allTagsMap;
						let t=(new Date().getTime()- 24 * 60 * 60 * 1000).toFixed();
						let tend=new Date().getTime().toFixed();
						this.startDate=getDateTime.dateTimeStr('y-m-d h:i:s',new Date(Number(t)));
						this.endDate=getDateTime.dateTimeStr('y-m-d h:i:s',new Date(Number(tend)));
						var step = "30S";
						let tagUrl = this.$requestUrl.requestUrl('/pi')+'/queryservice/queryInterpolatedValues2?tagNames='
									 + this.allTags + "&startDate=" + this.startDate +
									 "&endDate=" + this.endDate + "&step=" + step;
						uni.request({
							url: tagUrl,
							data:{
							},
							success: function(resp) {
								/* console.log("第二层");
								console.log(resp); */
								var data=resp.data.data;
								/* console.log(data);
									console.log(allTags); */
								for (let i = 0; i <_self.allTags.length ; i++) {
						                    // 取得数组里的每个tag
											//console.log("vvvvvv");
						                    let tag = _self.allTags[i];
						                    // 计算一次X轴所有坐标
						                      if(data[tag]){
						                        let xAxis = [];
						                        for (let j = 0; j < data[tag].length ; j++) {
						                          xAxis.push(data[tag][j].time);
						                        }
						                        _self.tempAxis = xAxis;
						                      }

						                    // 如果tag存在
						                    if(data[tag]){
						                      // 瞬量
						                      if(_self.allTagsMap.get(tag) == 1){
						                        let yAxis = [];
						                        for (let j = 0; j < data[tag].length ; j++) {
						                          if(data[tag][j].value == null){
						                            yAxis.push(null);
						                          }
						                          else{
						                            yAxis.push(data[tag][j].value.toFixed(2));
						                          }

						                        }
						                        //_self.yAxis1 = yAxis;
						                      }
						                      // 阀后压力
						                      else if (_self.allTagsMap.get(tag) == 2){
						                        let yAxis = [];
						                        for (let j = 0; j < data[tag].length ; j++) {
						                          if(data[tag][j].value == null){
						                            yAxis.push(null);
						                          }
						                          else{
						                            yAxis.push(data[tag][j].value.toFixed(2));
						                          }

						                        }

						                        _self.yAxis3 = yAxis;
						                      }
						                      // 油压
						                      else if (_self.allTagsMap.get(tag) == 3){
						                        let yAxis = [];
						                        for (let j = 0; j < data[tag].length ; j++) {
						                          if(data[tag][j].value == null){
						                            yAxis.push(null);
						                          }
						                          else{
						                            yAxis.push(data[tag][j].value.toFixed(2));
						                          }

						                        }
						                        _self.yAxis1 = yAxis;
						                      }
						                      // 套压
						                      else if (_self.allTagsMap.get(tag) == 4){
						                        let yAxis = [];
						                        for (let j = 0; j < data[tag].length ; j++) {
						                          if(data[tag][j].value == null){
						                            yAxis.push(null);
						                          }
						                          else{
						                            yAxis.push(data[tag][j].value.toFixed(2));
						                          }
						                        }
						                        _self.yAxis2 = yAxis;
						                      }
						                    }
						                  }
								//后续
								/* console.log('wwwwwwwwwwwwwww');
								console.log(_self.tempAxis);
								console.log(_self.yAxis1);
								console.log(_self.yAxis2);
								console.log(_self.yAxis3);*/
								let LineA={
									categories: _self.tempAxis,
									series:[{
									"name": "井口油压",
									"data": _self.yAxis1,
									},{
									"name": "井口套压",
									"data": _self.yAxis2,
									},{
									"name": "阀后压力",
									"data": _self.yAxis3,
									},]
								};
								_self.drawCharts1("canvasLineA",LineA);
							},
						});

					}
				});
			},
			//工艺组态曲线图配置
			drawCharts1(id,data){
			      const ctx = uni.createCanvasContext(id, this);
			        uChartsInstance1[id] = new uCharts({
			          type: "line",
			          context: ctx,
			          width: this.cWidth,
			          height: this.cHeight,
			          categories: data.categories,
			          series: data.series,
			          animation: true,
			          timing: "easeOut",
			          duration: 1000,
			          rotate: false,
			          rotateLock: false,
			          background: "#FFFFFF",
			          color: [ '#e72167', '#526c8f','#00a5f8'],
			          padding: [15,10,0,15],
			          fontSize: 13,
			          fontColor: "#666666",
			          dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			          dataPointShape: false,
			          dataPointShapeType: "solid",
			          touchMoveLimit: 60,
			          enableScroll: true,//滚动
			          enableMarkLine: false,
			          legend: {
			            show: true,
			            position: "bottom",
			            float: "center",
			            padding: 5,
			            margin: 5,
			            backgroundColor: "rgba(0,0,0,0)",
			            borderColor: "rgba(0,0,0,0)",
			            borderWidth: 0,
			            fontSize: 13,
			            fontColor: "#666666",
			            lineHeight: 11,
			            hiddenColor: "#CECECE",
			            itemGap: 10
			          },
			          xAxis: {
			            disableGrid: true,
			            disabled: false,//x轴是否关闭
			            axisLine: true,
			            axisLineColor: "#CCCCCC",
			            calibration: false,
			            fontColor: "#666666",
			            fontSize: 8,//x轴分类项字体的大小
			            rotateLabel: true,//是否旋转x轴分类的数据
			            rotateAngle: 30,//旋转x轴分类的数据的度数
			            itemCount: 500,//x轴显示的个数分类个数
						labelCount:5,//x轴单屏数据显示的个数分类
			            boundaryGap: "center",
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            gridType: "solid",
			            dashLength: 0,
			            gridEval: 4,
			            scrollShow: false,
			            scrollAlign: "left",
			            scrollColor: "#A6A6A6",
			            scrollBackgroundColor: "#EFEBEF",
			            formatter: ""
			          },
			          yAxis: {
			            gridType: "dash",
			            dashLength: 2,
			            disabled: false,
			            disableGrid: false,
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            padding: 10,
			            showTitle: true,
			            data: [
			              {
			                type: "value",
			                position: "left",
			                disabled: false,
			                axisLine: true,
			                axisLineColor: "#CCCCCC",
			                calibration: false,
			                fontColor: "#666666",
			                fontSize: 13,
			                textAlign: "right",
			                title: "MPa",
			                titleFontSize: 11,
			                titleOffsetY: 0,
			                titleOffsetX: 0,
			                titleFontColor: "#666666",
			                min: 0,
			                max: null,
			                tofix: 2,
			                unit: "",
			                formatter: ""
			              },
			            ]
			          },
			          extra: {
			            line: {
			              type: "curve",
			              width: 2
			            },
			            tooltip: {
			              showBox: true,
			              showArrow: true,
			              showCategory: true,
			              borderWidth: 0,
			              borderRadius: 0,
			              borderColor: "#000000",
			              borderOpacity: 0.7,
			              bgColor: "#000000",
			              bgOpacity: 0.7,
			              gridType: "solid",
			              dashLength: 4,
			              gridColor: "#CCCCCC",
			              fontColor: "#FFFFFF",
			              splitLine: true,
			              horizentalLine: false,
			              xAxisLabel: false,
			              yAxisLabel: false,
			              labelBgColor: "#FFFFFF",
			              labelBgOpacity: 0.7,
			              labelFontColor: "#666666"
			            },
			            markLine: {
			              type: "solid",
			              dashLength: 4,
			              data: []
			            }
			          }
			        });
			},
			//其它
			touchstart1(e){
			  uChartsInstance1[e.target.id].scrollStart(e);
			},
			touchmove1(e){
			  uChartsInstance1[e.target.id].scroll(e);
			},
			touchend1(e){
			  uChartsInstance1[e.target.id].scrollEnd(e);
			  uChartsInstance1[e.target.id].touchLegend(e);
			  uChartsInstance1[e.target.id].showToolTip(e);
			},
			//工艺组态曲线图配置
			drawCharts1(id,data){
			      const ctx = uni.createCanvasContext(id, this);
			        uChartsInstance1[id] = new uCharts({
			          type: "line",
			          context: ctx,
			          width: this.cWidth,
			          height: this.cHeight,
			          categories: data.categories,
			          series: data.series,
			          animation: true,
			          timing: "easeOut",
			          duration: 1000,
			          rotate: false,
			          rotateLock: false,
			          background: "#FFFFFF",
			          color: [ '#e72167', '#526c8f','#00a5f8'],
			          padding: [15,10,0,15],
			          fontSize: 13,
			          fontColor: "#666666",
			          dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			          dataPointShape: false,
			          dataPointShapeType: "solid",
			          touchMoveLimit: 60,
			          enableScroll: true,//滚动
			          enableMarkLine: false,
			          legend: {
			            show: true,
			            position: "bottom",
			            float: "center",
			            padding: 5,
			            margin: 5,
			            backgroundColor: "rgba(0,0,0,0)",
			            borderColor: "rgba(0,0,0,0)",
			            borderWidth: 0,
			            fontSize: 13,
			            fontColor: "#666666",
			            lineHeight: 11,
			            hiddenColor: "#CECECE",
			            itemGap: 10
			          },
			          xAxis: {
			            disableGrid: true,
			            disabled: false,//x轴是否关闭
			            axisLine: true,
			            axisLineColor: "#CCCCCC",
			            calibration: false,
			            fontColor: "#666666",
			            fontSize: 8,//x轴分类项字体的大小
			            rotateLabel: true,//是否旋转x轴分类的数据
			            rotateAngle: 30,//旋转x轴分类的数据的度数
			            itemCount: 500,//x轴显示的个数分类个数
						labelCount:5,//x轴单屏数据显示的个数分类
			            boundaryGap: "center",
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            gridType: "solid",
			            dashLength: 0,
			            gridEval: 4,
			            scrollShow: false,
			            scrollAlign: "left",
			            scrollColor: "#A6A6A6",
			            scrollBackgroundColor: "#EFEBEF",
			            formatter: ""
			          },
			          yAxis: {
			            gridType: "dash",
			            dashLength: 2,
			            disabled: false,
			            disableGrid: false,
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            padding: 10,
			            showTitle: true,
			            data: [
			              {
			                type: "value",
			                position: "left",
			                disabled: false,
			                axisLine: true,
			                axisLineColor: "#CCCCCC",
			                calibration: false,
			                fontColor: "#666666",
			                fontSize: 13,
			                textAlign: "right",
			                title: "MPa",
			                titleFontSize: 11,
			                titleOffsetY: 0,
			                titleOffsetX: 0,
			                titleFontColor: "#666666",
			                min: 0,
			                max: null,
			                tofix: 2,
			                unit: "",
			                formatter: ""
			              },
			            ]
			          },
			          extra: {
			            line: {
			              type: "curve",
			              width: 2
			            },
			            tooltip: {
			              showBox: true,
			              showArrow: true,
			              showCategory: true,
			              borderWidth: 0,
			              borderRadius: 0,
			              borderColor: "#000000",
			              borderOpacity: 0.7,
			              bgColor: "#000000",
			              bgOpacity: 0.7,
			              gridType: "solid",
			              dashLength: 4,
			              gridColor: "#CCCCCC",
			              fontColor: "#FFFFFF",
			              splitLine: true,
			              horizentalLine: false,
			              xAxisLabel: false,
			              yAxisLabel: false,
			              labelBgColor: "#FFFFFF",
			              labelBgOpacity: 0.7,
			              labelFontColor: "#666666"
			            },
			            markLine: {
			              type: "solid",
			              dashLength: 4,
			              data: []
			            }
			          }
			        });
			},
			//其它
			touchstart1(e){
			  uChartsInstance1[e.target.id].scrollStart(e);
			},
			touchmove1(e){
			  uChartsInstance1[e.target.id].scroll(e);
			},
			touchend1(e){
			  uChartsInstance1[e.target.id].scrollEnd(e);
			  uChartsInstance1[e.target.id].touchLegend(e);
			  uChartsInstance1[e.target.id].showToolTip(e);
			},

			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					colors:['#e72167', '#526c8f','#4c99e6'],
					fontSize:13,
					padding:[15,50,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},

					dataLabel:false,
					dataPointShape:false,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					//enableScroll: true,
					xAxis: {
						boundaryGap:"center",
						type:'grid',
						gridColor:'#ff0000',
						gridType:'dash',
						dashLength:8,
						scrollShow:true,
						scrollAlign:'left',//滚动条初始位置
						scrollBackgroundColor:'#ff0000',//默认为 #EFEBEF
						scrollColor:'#ff0000',//默认为 #ff0000
						labelCount: 1,
						disableGrid:true,
						fontSize:12,
					},
					yAxis: {
						splitNumber:5,
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						showTitle:true,
						data:[{
							title:"MPa",
							//max:_self.pressureAxisMax,
							min:0,
							titleOffsetY:8,
							titleOffsetX:5,
							tofix: 2,
							position: 'left'
						}]

					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
			},

			touchLineA(e) {
				lastMoveTime=Date.now();
			},
			moveLineA(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime = currMoveTime;

				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchEndLineA(e){
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			moveLineB(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime2;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime2 = currMoveTime;

				let currIndex=canvaLineB.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineB.opts.categories.length){
					let riqi=canvaLineB.opts.categories[currIndex];
					let leibie=canvaLineB.opts.series[0].name;
					let shuju=canvaLineB.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineB.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchEndLineB(e){
				let currIndex=canvaLineB.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineB.opts.categories.length){
					let riqi=canvaLineB.opts.categories[currIndex];
					let leibie=canvaLineB.opts.series[0].name;
					let shuju=canvaLineB.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineB.touchLegend(e);
				canvaLineB.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},

			zoomCandle(val) {
				canvaCandle.zoom({
					itemCount: val
				});
			},
			sliderMove(e){
				_self.itemCount=e.detail.value;
				_self.zoomCandle(e.detail.value);
			},
			tapButton(type){
				let step=5;
				if(type=='in'){
					_self.itemCount -= step;
					if(_self.itemCount<=5){
						_self.itemCount=5;
					}
				}else{
					_self.itemCount += step;
					if(_self.itemCount>=_self.sliderMax){
						_self.itemCount=_self.sliderMax;
					}
				}
				_self.zoomCandle(_self.itemCount);
			},
			formSecondToWord(val){
				let theTime = parseInt(val);// 秒
				let middle = 0;// 分
				let hour = 0;// 小时

				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
						if (middle > 60) {
							hour = parseInt(middle / 60);
							middle = parseInt(middle % 60);
						}
					}
				let result = ""+parseInt(theTime)+"秒";
				if (middle > 0) {
				result = "" + parseInt(middle) + "分" + result;
				}
				if (hour > 0) {
					result = "" + parseInt(hour) + "小时" + result;
				}
				return result;
			},
			xAxisMax(arr){
				let max = 0;
				for(let i=0 ; i<arr.length-1 ; i++){
					if(arr[i]){
						if(arr[i]>max){
							max = arr[i];
						}
					}
				};
				return max;
			},
		}
	}
</script>

<style>
	.saqwe1{
		font-size: 20rpx;
		margin-left: 20rpx;
	}
	.saqwe2{
		/* margin-top: -25rpx; */
		margin-left: 110rpx;
	}
	.saqwe3{
		font-size: 20rpx;
		margin-left: 260rpx;
	}
	.saqwe4{
		margin-top: -23px;
		margin-left: 350rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.content-B {
		display: -webkit-flex;
		-webkit-align-items: center;
		align-items: center;
	}
	.title{

		height: 22px;
		font-size: 15px;
		font-family: Microsoft YaHei-Bold, Microsoft YaHei;
		font-weight: bold;
		color: #424242;
		line-height: 22px;
		margin-left: 16px;
	}
	.title-B{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #8f8f94;
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 700upx;
		height: 400upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.charts {
		width: 700upx;
		height: 400upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.text{
		width: 50%;
		size: 24rpx;
		font-size: 36rpx;
		color: #565658;
		width: 100%;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
	}
	.text2{
		width: 50%;
		font-size: 24rpx;
		font-weight: 200;
		color: #000;
		height: 30rpx;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
		border-right: solid 1rpx #b7bbc2;
	}
	.text2-B{
		width: 33%;
		font-size: 24rpx;
		font-weight: 200;
		color: #000;
		height: 30rpx;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
	}
	.zsState-A{
		width: 100%;
		text-align: left;
		margin-top: 8px;

		font-size: 14px;
		font-weight: bold;
		color: #858585;
		line-height: 22px;

	}
	.zsState-B{
		width: 100%;
		text-align: right;
		margin-top: 8px;

		font-size: 14px;
		font-weight: bold;
		color: #F09B00;
		line-height: 22px;
	}
	.zsState-C{
		width: 100%;
		size: 24rpx;
		font-size: 36rpx;
		font-weight:600;
		color: #707070;
		width: 100%;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
		padding-top: 10rpx;
	}
	.AAA{
		margin-top: 50rpx;
		margin-bottom: 20rpx;
	}
	.AAA-1{
		margin-bottom: 20rpx;
	}
	.BBB{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.CCC{
		height: 50rpx;
	}
	.headline-A{
		width: 4px;
		height: 20px;
		background: #F09B00;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}
	.headline-B{
		width: 90%;
		margin-top: 10px;
	}
	.zsjzt{
		width: 80%;
		display: flex;
		flex-direction:row;
	}
	.yj-A{
		width: 6px;
		height: 6px;
		background: #C4C4C4;
		opacity: 1;
		margin-left: 10px;
		border-radius: 50%;
	}
	.yj-A2{
		width: 6px;
		height: 6px;
		background: #F02B00;
		opacity: 1;
		margin-left: 10px;
		border-radius: 50%;
	}
	.yj-B{
		width: 40px;
		height: 12px;
		background: #BED57D;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		margin-left: 10px;
		text-align: center;
	}
	.yj-B2{
		width: 40px;
		height: 14px;
		background: #F02B00;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		margin-left: 10px;
		text-align: center;
	}
	.yj-B-text{
		width: 40px;
		font-size: 7px;
		font-weight: 300;
		color: #FFFFFF;
	}
	.yj-B-text2{
		width: 40px;
		font-size: 9px;
		font-weight: 400;
		color: #ff5500;
	}
	.yj-C-text{
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		color: #C3BEBA;
		line-height: 22px;
		margin-left: 8px;
	}
	.yj-C-text2{
		font-size: 14px;
		font-weight: bold;
		color: #727272;
		line-height: 22px;
		margin-left: 8px;
		text-align: center;
	}
	.yj-D-text{
		margin-left: 10px;
		text-align: center;

		font-size: 12px;
		font-weight: 400;
		color: #C3BEBA;

	}
	.loading1{
		margin-top: 50px;
	}
	.scroll-Y {
		height: 200rpx;
	}
	.scroll-xy{
		margin-left: 20px;
		width: 1250px;
		height: 800px;
	}
</style>
